<template>
	<view class="content">
		<view class="content_time">
			{{itemWechat.datetime}}
		</view>
		<view class="content_item u-flex" :class="itemWechat.self_side ? 'content_item--right' : 'content_item--left'">

			<u-image :class="itemWechat.self_side ? 'u-m-l-26' : 'u-m-r-26'" :src="itemWechat.avatar" :width="91.5"
				:height="91.5"  shape="circle"></u-image>

			<view class="content_item_weixin" v-if="itemWechat.message">
				<view class="content_item_weixin_tp u-flex">
					<u-image src="/pages/pagesMessage/static/switch-weixin.png" width="64" height="64"></u-image>
					<view class="u-m-l-30 weixin-text">
						<view v-if="itemWechat.message.status != 1">
							我想和您交换微信号， 您是否同意
						</view>
						<view v-else class="switch-weixin-success">
							<view class="success-txt1">
								{{itemWechat.message.contact}}的微信号：
							</view>
							<view class="success-txt2">
								{{itemWechat.message.wechat}}
							</view>
						</view>
					</view>
				</view>
				<view class="content_item_weixin_btm">
					<view v-if="itemWechat.message.status == 0" class="btn-weixin-default">
						<view class="btn refuse" @click="$u.throttle(handleRefuse, 2000)">拒绝</view>
						<view class="btn agree" @click="$u.throttle(handleAgree, 2000)">同意</view>
					</view>
					<view v-else-if="itemWechat.message.status == 1" class="btn-weixin-success"
						@click="$u.throttle(handleCopyWechat, 1000)">
						复制微信号
					</view>
					<view v-else-if="itemWechat.message.status == 2" class="btn-weixin-error">
						已拒绝
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		useUserIm
	} from '/stores/userIm.js'
	const IM = useUserIm()
	const itemWechat = ref({})
	const props = defineProps({
		itemWechat: Object,
		cid: [String, Number]
	})
	const emit = defineEmits(['handleExchangeWechatAgree'])
	watch(()=>props.itemWechat,(nv)=>{
		itemWechat.value = nv
	},{
		immediate:true,
		deep:true
	})
	/**
	 * 拒绝
	 */
	const handleRefuse = () => {
		var msgObj = {
			controller: 'SendWechat',
			action: 'refuse',
			args: {
				token: IM.imToken,
				chatid: IM.chatid,
				messageid: itemWechat.value.messageid,
				cids: props.cid,
				content:'对方已拒绝交换微信号',
				title:uni.getStorageSync('userName')
			}
		}
		IM.webSocket_send(msgObj)
	}
	/**
	 * 同意
	 */
	const handleAgree = () => {
		emit('handleExchangeWechatAgree', itemWechat.value)
	}
	// 复制
	const handleCopyWechat = () => {
		uni.setClipboardData({
			data: itemWechat.value.message.wechat,
			success() {
				uni.$u.toast('复制成功')
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-bottom: 60rpx;

		&_time {
			text-align: center;
			margin: 46rpx 0 28rpx 0;
			color: #999999;
			font-size: 24rpx;
		}

		&_item--left {
			flex-direction: row;
			margin-left: 30rpx;
		}

		&_item--right {
			flex-direction: row-reverse;
			margin-right: 30rpx;
		}

		&_item {
			font-size: 28rpx;
			height: 100%;
			margin-bottom: 60rpx;

			&_weixin {
				width: 480rpx;
				height: 240rpx;
				background: #ffffff;
				border-radius: 30rpx;

				.weixin-text {
					flex: 3;
					color: #666666;
					font-size: 26rpx;
					.switch-weixin-success {
						.success-txt2 {
							color: #1CB56E;
							word-break: break-all;
							word-wrap: break-word;
							margin-top: 10rpx;
						}
					}
				}

				&_tp {
					padding: 40rpx;
				}

				&_btm {
					.btn-weixin-default {
						display: flex;
						justify-content: center;
						align-items: center;

						.btn {
							width: 120rpx;
							height: 50rpx;
							display: flex;
							justify-content: center;
							text-align: center;
							align-items: center;
							border-radius: 10rpx;

							&.agree {
								background: #00D075;
								border: 2rpx solid #00D075;
								color: #fff;
								margin-left: 52rpx;
							}

							&.refuse {
								background: #ffffff;
								border: 2rpx solid #00D075;
								color: #00D075;
							}
						}
					}

					.btn-weixin-success {
						text-align: center;
						line-height: 42px;
						color: #2FBD6E;
						font-size: 13px;
						border-top: 1px solid #e8e8e8;
					}

					.btn-weixin-error {
						border-top: 2rpx solid #e8e8e8;
						text-align: center;
						height: 84rpx;
						line-height: 84rpx;
						color: #999999;
						font-size: 26rpx;
					}
				}
			}
		}

	}
</style>